<template>
  <div id="collegeIntro">
    <div class="info">
      <img :src="collegeData.bannerUrl" alt="" style="margin-right: 20px" />
      <div class="info-right">
        <div class="df" style="justify-content: space-between">
          <div
            v-for="(item, key, index) in jibenInfo"
            :key="index"
            style="display: flex; flex-direction: column; align-items: center"
          >
            <img
              :src="jbIconModul[key]"
              style="margin: 0 24rpx; width: 50px; height: 50px"
            />
            <div style="font-size: 12px; margin-top: 10px">{{ item }}</div>
          </div>
          <div
            style="display: flex; flex-direction: column; align-items: center"
            v-if="pointsOfShuo"
          >
            <img
              src="../../../../assets/images/jiben-6-.png"
              style="margin: 0 24rpx; width: 50px; height: 50px"
            />
            <div
              style="
                font-size: 12px;
                margin-top: 10px;
                display: flex;
                align-items: center;
              "
            >
              <div>
                <span>{{ pointsOfShuo }}</span>
                <span style="margin: 0 2px" v-if="pointsOfShuo1">/</span>
                <span v-if="pointsOfShuo1">{{ pointsOfShuo1 }}</span>
              </div>
              <el-tooltip class="box-item" effect="dark" placement="bottom">
                <template #content>
                  <span v-if="pointsOfShuo2"
                    >{{ pointsOfShuo2 }}{{ pointsOfShuo }}个</span
                  >
                  <br />
                  <span v-if="pointsOfShuo3"
                    >{{ pointsOfShuo3 }}{{ pointsOfShuo1 }}个</span
                  >
                </template>
                <img
                  src="https://b.gaokaow.cc/question@2x.png"
                  alt=""
                  style="width: 14px; height: 14px; margin-left: 3px"
                />
              </el-tooltip>
            </div>
          </div>
          <div
            style="display: flex; flex-direction: column; align-items: center"
            v-if="pointsOfBo"
          >
            <img
              src="../../../../assets/images/jiben-7-.png"
              style="margin: 0 24rpx; width: 50px; height: 50px"
            />
            <div
              style="
                font-size: 12px;
                margin-top: 10px;
                display: flex;
                align-items: center;
              "
            >
              <div>
                <span>{{ pointsOfBo }}</span>
                <span style="margin: 0 2px" v-if="pointsOfBo1">/</span>
                <span v-if="pointsOfBo1">{{ pointsOfBo1 }}</span>
              </div>
              <el-tooltip class="box-item" effect="dark" placement="bottom">
                <template #content
                  >{{ pointsOfBo2 }}{{ pointsOfBo }}个<br />{{ pointsOfBo3
                  }}{{ pointsOfBo1 }}个</template
                >
                <img
                  src="https://b.gaokaow.cc/question@2x.png"
                  alt=""
                  style="width: 14px; height: 14px; margin-left: 3px"
                />
              </el-tooltip>
            </div>
          </div>
        </div>

        <div class="introduction f14">
          {{ collegeData.introduction_simple }}
          <span class="allBtn curr" @click="handleLookAll">全部</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
const props = defineProps({
  collegeData: {
    type: Object,
    default: () => {},
  },
});
const jibenInfo = ref({});
const pointsOfShuo = ref(0);
const pointsOfShuo1 = ref(0);
const pointsOfShuo2 = ref('');
const pointsOfShuo3 = ref('');
const pointsOfBo1 = ref(0);
const pointsOfBo2 = ref('');
const pointsOfBo3 = ref('');
const pointsOfBo = ref(0);
const jbIconModul = ref({
  办学类型: require('../../../../assets/images/jiben-1-.png'),
  地址: require('../../../../assets/images/jiben-2-.png'),
  隶属: require('../../../../assets/images/jiben-3-.png'),
  高校层次: require('../../../../assets/images/jiben-4-.png'),
  建校时间: require('../../../../assets/images/jiben-5-.png'),
  硕士点: require('../../../../assets/images/jiben-6-.png'),
  博士点: require('../../../../assets/images/jiben-7-.png'),
  国家重点学科: require('../../../../assets/images/jiben-8-.png'),
});
const code = ref('');
code.value = route.query.collegecode || '';
const handleLookAll = () => {
  let intData = {
    collegeName: props.collegeData.cnName,
    introduction: props.collegeData.introduction,
  };
  localStorage.setItem('introduction', JSON.stringify(intData));
  window.open(
    router.resolve('/college/detail/intro?collegecode=' + code.value).href,
    '_blank',
  );
  window.open('/college/detail/intro');
};
watch(
  () => props.collegeData,
  (newVal) => {
    let natureType = '';
    if (newVal.natureType == 'public') {
      natureType = '公办';
    } else if (newVal.natureType == 'private') {
      natureType = '民办';
    } else {
      natureType = '中外/港澳';
    }
    jibenInfo.value['办学类型'] = natureType;
    jibenInfo.value['地址'] = newVal.provinceName + '-' + newVal.cityName;
    jibenInfo.value['隶属'] = newVal.belong.length > 0 ? newVal.belong : '-';

    jibenInfo.value['高校层次'] = newVal.eduLevel == 'ben' ? '本科' : '专科';
    jibenInfo.value['建校时间'] = newVal.createdYear || '-';
    jibenInfo.value['国家重点学科'] =
      newVal.featureMajor.countries.length || '-';
    if (newVal.pointsOfShuo) {
      if (newVal.pointsOfShuo?.length > 1) {
        pointsOfShuo.value = newVal.pointsOfShuo[0].number;
        pointsOfShuo1.value = newVal.pointsOfShuo[1].number;
        pointsOfShuo2.value = newVal.pointsOfShuo[0].type;
        pointsOfShuo3.value = newVal.pointsOfShuo[1].type;
      } else {
        pointsOfShuo.value = newVal.pointsOfShuo[0]?.number;
        pointsOfShuo2.value = newVal.pointsOfShuo[0]?.type;
      }
    }

    if (newVal.pointsOfBo) {
      pointsOfBo.value = newVal.pointsOfBo[0]?.number;
      pointsOfBo1.value = newVal.pointsOfBo[1]?.number;
      pointsOfBo2.value = newVal.pointsOfBo[0]?.type;
      pointsOfBo3.value = newVal.pointsOfBo[1]?.type;
    }
  },
);
</script>

<style lang="scss" scoped>
#collegeIntro {
  margin-top: 20px;
  .info {
    display: flex;
    img {
      width: 400px;
      height: 250px;
      //   margin-right: 20px;
    }
    .info-right {
      flex: 1;
    }
  }
  .introduction {
    margin-top: 20px;
    .allBtn {
      color: var(--color-text);
      margin-left: 5px;
    }
  }
}
</style>
